<template>
  <div class="lectureHall">
    <div class="lectureHall_list">
      <router-link
        :to="{name:'en_lectureHall_details',query:{id:item.id}}"
        class="lectureHall_item"
        v-for="(item,index) in list"
        :key="index"
        v-flex_for="{count:list.length,number:number,key:index}"
      >
        <div class="item_tu">
        <el-image class="item_tu_bg" :src="item.image" lazy fit="cover"></el-image>
          <img class="play_botton" src="@/assets/images/video_play.png" alt />
        </div>
        <div class="content">
          <div class="item_title">{{item.title}}</div>
          <p>{{item.desc}}</p>
          <div class="time">
            <img src="@/assets/images/news_time.png" alt />
            <span>{{item.create_time[0]}}</span>
          </div>
        </div>
      </router-link>
    </div>
    <div>
      <el-pagination
        :page-size="10"
        :total="count"
        background
        layout="prev, pager, next"
        @current-change="pageSize"
        :current-page.sync="currentPage"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import { video_list } from "@/api/about.js";
export default {
     name: "lectureHall",
  data() {
    return {
      list: [],
      number: 4,
      count: 0,
      currentPage: 1,
    };
  },
  mounted() {
    this.getList();
  },
  created() {
    if (this.$store.state.headTitle.equipment == "mobile") {
      this.number = 2;
    } else {
      if (this.$store.state.headTitle.clientW < 1200) {
        this.number = parseInt(this.$store.state.headTitle.clientW / 300);
      }
    }
  },
  watch: {
    "$store.state.headTitle.equipment": {
      deep: true,
      handler: function (newValue, oldValue) {
        if (newValue == "pc") {
          this.number = 4;
        } else {
          this.number = 2;
        }
        // this.$refs.swiper.update();
      },
    },
    "$store.state.headTitle.clientW": {
      deep: true,
      handler: function (newValue, oldValue) {
        // 设置一个定时器 避免多次触发
        clearTimeout(this.Timeout);
        this.Timeout = setTimeout(() => {
          console.log(newValue);
          this.number = parseInt(newValue / 300);
        }, 200);
      },
    },
  },
  methods: {
    getList(page, limit) {
      video_list({ page: page || 1, limit: limit || 10 }).then((res) => {
        console.log(res);
        res.data.data.map((item) => {
          item.create_time = item.create_time.split(" ");
        });
        this.list = res.data.data;
        this.count = res.data.count;
      });
    },
    pageSize(val) {
      this.currentPage = val;
      this.getList(val, 10);
    },
  },
};
</script>
<style scoped src="./sass/aboutUs.css"></style>